<template>
  <div class="ui_choosecard">

    <van-nav-bar title="选择银行卡">
      <van-icon name="arrow-left" slot="left" color="#333" @click="back"></van-icon>
    </van-nav-bar>
    <div class="success_empty">
      <p>常用银行</p>
    </div>
    <div class="bank" @click="goToBindBank">
      <div class="bank_div "><i class="iconfont  icon-yinhang font_one"></i></div>
      <!-- icon 需要换  -->
      <div class="bank_div ">
        <div>中国银行</div>
        <div>尾号8888储蓄卡</div>
      </div>
      <div class="bank_div "><i class="iconfont icon-gouxuan font_two"></i></div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'ChooseCard',
    methods: {
      back() {
        this.$router.go(-1);
      },
      goToBindBank() {
        this.$router.push('/bindbank');
      }
    }
  };
</script>
<style lang="less">
  .ui_choosecard {
    .success_empty {
      width: 750px;
      height: 30px;
      font-size: 16px;
      line-height: 0px;
      border-top: 1px solid #e1e1e1;
      border-bottom: 1px solid #e1e1e1;
      p {
        padding-left: 30px;
        color: #999999;
      }
    }
    .bank {
      border-top: 1px solid #f7a427;
      border-bottom: 1px solid #f7a427;
      height: 120px;
      width: 750px;
      background-color: #fff;
      .bank_div {
        float: left;
        line-height: 40px;
        margin-top: 20px;
        margin-left: 30px;
      }
      .font_two,
      .font_one {
        line-height: 80px;
      }
      .font_one {
        color: #f00;
        font-size: 80px;
      }
      .font_two {
        margin-left: 330px;
        color: #f7a427;
        font-size: 40px;
      }
    }
  }
</style>
